<template>
  <div class="mainContent">
    <pathTracking :path="Model.path"/>
    <div class="container">
      <!-- 一级tabs -->
      <el-tabs v-model="Model.activeTab" @tab-click="onTabChange">
        <el-tab-pane label="退料入库单详情" name="1"></el-tab-pane>
        <el-tab-pane label="操作记录" name="2"></el-tab-pane>
      </el-tabs>
      <div class="tabBox">
        <el-row class="detailTable">
          <el-form :inline="true">
            <el-col
              :sm="24"
              :md="12"
              :lg="8"
              :xl="6"
              v-for="(item,index) in Model.tabFormInline"
              :key="index"
            >
              <el-form-item :label="item.label+'：'">{{item.value}}</el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div class="tabBoxStep">
          <el-steps :active="Model.stepOption.activeStep">
            <el-step
              :title="item.title"
              :description="item.description"
              v-for="(item,index) in Model.stepOption.step"
              :key="index"
            ></el-step>
          </el-steps>
        </div>
        
        <el-row class="detailTable">
          <div class="detailTableItemTitle">
            <span class="detailTableImgSmall"></span>
            <p class="text">退料入库单基础信息</p>
            <img
              class="detailTableImgNormal"
              :src="Model.detailTableFrom.src"
              alt
              @click="toggleTableDetail('detailTableFrom')"
            >
          </div>
          <advancedSearch :option="Model.filterOption" @getChild="getFilterData"></advancedSearch>
        </el-row>
        <div v-show="Model.activeTab==1">
          <el-row class="detailTable">
            <div class="detailTableItemTitle">
              <span class="detailTableImgSmall"></span>
              <p class="text">退料物料明细-应入</p>
              <img
                class="detailTableImgNormal"
                :src="Model.tab1TableDetail1.src"
                alt
                @click="toggleTableDetail('tab1TableDetail1')"
              >
            </div>
            <div class="detailTableDetail" v-show="Model.tab1TableDetail1.flag">
              <el-table :data="Model.shouldSaleGoodsInfoVos" border style="width: 100%;max-height:550px">
                <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
                <el-table-column prop="batchNo" label="条码" width="120"></el-table-column>
                <el-table-column prop="poNumber" label="采购订单号" width="150"></el-table-column>
                <el-table-column prop="customCode" label="定制编码" width="150"></el-table-column>
                <el-table-column prop="commodityType" label="商品类型" width="120"></el-table-column>
                <el-table-column prop="description" label="物料描述" width="250"></el-table-column>
                <el-table-column prop="mainQuantity" label="数量" width="200"></el-table-column>
                <el-table-column prop="reamark" label="退料原因" width="120"></el-table-column>
                <el-table-column prop="theWeightOfBareStone" label="克拉重" width="120"></el-table-column>
                <el-table-column prop="netGoldWeight" label="金重" width="120"></el-table-column>
                <el-table-column prop="theTotalWeightOfTheProduct" label="成品总重" width="120"></el-table-column>
              </el-table>
            </div>
          </el-row>
          <el-row class="detailTable">
            <div class="detailTableItemTitle">
              <span class="detailTableImgSmall"></span>
              <p class="text">退料物料明细-实入</p>
            </div>
            <div class="detailTableDetail">
              <div class="exportBox" v-show="!Model.detailFlag">
                <div class="exportBoxAuto">
                  <span>是否手动导入</span>
                  <el-radio-group v-model="Model.exportBarcodeFlag">
                    <el-radio :label="false">否</el-radio>
                    <el-radio :label="true">是</el-radio>
                  </el-radio-group>
                  <div class="exportBoxHand" v-show="!Model.exportBarcodeFlag">
                    <el-input
                      v-model="Model.exportBarcode"
                      placeholder="请输入条码/包码/物料编码"
                      size="small"
                      style="margin: 0 20px;width: 200px;"
                    ></el-input>
                    <button class="normalButton bgBtnBrown" @click="requestSaleGoodsInfoByEntity">确认</button>
                  </div>
                  <button
                    class="normalButton bgBtnBrown"
                    v-show="Model.exportBarcodeFlag"
                    style="margin-left: 10px;"
                    @click="onExportMaterial"
                  >+ 导入物料</button>
                </div>
                <div class="exportBoxAuto">
                  <button class="normalButton bgBtnWhite" @click="onDeleteExportData">删除</button>
                </div>
              </div>
              <el-table
                :data="Model.actualSaleGoodsInfoVos"
                border
                style="width: 100%;max-height:550px"
                @selection-change="onTableSelectionChange"
              >
                <el-table-column type="selection" width="50" fixed></el-table-column>
                <el-table-column type="index" width="50" label="序号" fixed></el-table-column>
                <el-table-column prop="batchNo" label="条码" width="120"></el-table-column>
                <el-table-column prop="poNumber" label="采购订单号" width="150"></el-table-column>
                <el-table-column prop="customCode" label="定制编码" width="150"></el-table-column>
                <el-table-column prop="commodityType" label="商品类型" width="120"></el-table-column>
                <el-table-column prop="description" label="物料描述" width="250"></el-table-column>
                <el-table-column prop="mainQuantity" label="数量" width="200"></el-table-column>
                <el-table-column prop="reamark" label="退料原因" width="120"></el-table-column>
                <el-table-column prop="theWeightOfBareStone" label="克拉重" width="120"></el-table-column>
                <el-table-column prop="netGoldWeight" label="金重" width="120"></el-table-column>
                <el-table-column prop="theTotalWeightOfTheProduct" label="成品总重" width="120"></el-table-column>
              </el-table>
            </div>
            <div v-show="!Model.detailFlag" style="text-align: center;">
              <button class="normalButton bgBtnBrown" style="margin-right: 15px;" @click="onSureDelivery">确认发货</button>
              <button class="normalButton bgBtnBlack">取消</button>
            </div>
          </el-row>
        </div>
        <div v-show="Model.activeTab==2">
          <el-row class="detailTable">
            <div class="detailTableItemTitle">
              <span class="detailTableImgSmall"></span>
              <p class="text">订单操作日志</p>
              <img
                class="detailTableImgNormal"
                :src="Model.tab2TableDetail1.src"
                alt
                @click="toggleTableDetail('tab2TableDetail1')"
              >
            </div>
            <div class="detailTableDetail" v-show="Model.tab2TableDetail1.flag">
              <el-table
                :data="Model.saleLogList"
                border
                show-summary
                style="width: 100%;max-height:550px"
                @selection-change="onTableSelectionChange"
              >
                <el-table-column prop="createTime" label="时间" width="200"></el-table-column>
                <el-table-column prop="type" label="操作类型" width="120"></el-table-column>
                <el-table-column prop="createBy" label="操作人" width="120"></el-table-column>
                <el-table-column prop="record" label="操作记录"></el-table-column>
              </el-table>
            </div>
          </el-row>
        </div>
        <!-- 导入物料弹框 -->
      <el-dialog :visible.sync="Model.dialogFormVisible" top="100px" class="viewDialog viewDialogSmall">
        <div class="common-table-title">
          <div class="common-table-icon"></div>
          <div class="common-table-fl">导入物料</div>
        </div>
        <div class="exportInputBox">
          <el-input placeholder="请输入内容" v-model="Model.uploadFile.name" disabled class="input-with-select" size="small">
            <el-button slot="append" size="small" type="primary">浏览</el-button>
          </el-input>
          <div class="exportInputHandle">
            <input type="file" @change="onUploadFileChange">
            </div>
            <div class="viewDialogFooter">
              <div class="viewDialogFooterSure" @click="onUploadSureFile">上传模板</div>
            </div>
            <div class="viewDialogFooter">
              <a :href="Model.fileUrl">{{Model.fileName}}</a>
            </div>
          </div>
      </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import pathTracking from "@/components/common/pathTracking";
import pagination from "@/components/common/pagination.vue";
import advancedSearch from "@/components/common/filter/advancedSearch";
import { getDateString } from "@/assets/js/common.js";
import Model from "./model.js";
import Controller from "./controller.js";
export default {
  name: "purchase",
  mixins: [Model, Controller],
  components: {
    advancedSearch,
    pagination,
    pathTracking
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
@import "./index.less";
</style>
